<!-- 监控中心详细页面 -->
<template>
    <div class="roomDetail">
        <div class="selectValue">
            <label class="value"> {{ name }}</label>
            <div class="rightValue">
                <span class="cursor" @click="currentClick('设备数')">
                    设备数：<b>{{ sbxq.总数 ?? 0 }}台</b>
                </span>
                <span class="cursor" @click="currentClick('分闸数')">
                    <label class="green"> </label>
                    分闸数：<b>{{ sbxq.分闸数 }}台</b>
                </span>
                <span class="cursor" @click="currentClick('零能耗数')">
                    <label class="gray"> </label>
                    零能耗数：<b>{{ sbxq.零能耗数 }}台</b>
                </span>
                <span class="cursor" @click="currentClick('离线')">
                    <label class="gray"> </label>
                    离线数：<b>{{ sbxq.离线 }}台</b>
                </span>
                <!-- <span class="cursor" @click="currentClick('在线')">
                    <label class="green"> </label>
                    在线：<b>{{ sbxq.在线 }}台</b>
                </span>
                <span class="cursor" @click="currentClick('离线')">
                    <label class="gray"> </label>
                    离线：<b>{{ sbxq.离线 }}台</b>
                </span>
                <span class="cursor" @click="currentClick('告警')">
                    <label class="red"> </label>
                    告警：<b>{{ sbxq.告警 }}台</b>
                </span>
                <span class="cursor" @click="currentClick('欠费')">
                    <label class="orange"> </label>
                    欠费：<b>{{ sbxq.欠费 }}台</b>
                </span> -->
            </div>
        </div>
        <div class="gjw-list">
            <div class="gjw-list-list" :style="{height: getHeight()}">
                <div v-if="listData.length == 0" class="noData">暂无数据</div>
                <div v-else>
                    <div class="gjw-list-item">
                        <!-- //                //   eq_type设备类型 按国家导则 01 电表 02 水表 03气.... -->
                        <div class="item" v-for="(item, index) in listData" v-bind:key="index" @click="gotoDetail(item)">
                            <div class="item-header" :class="item.eq_type == '01' ? 'sb' : 'db'">
                                <img :src="getImg(item.eq_type)" />
                                <el-tooltip :content="item.eq_name" placement="top">
                                    <label>{{ item.eq_name }}</label></el-tooltip
                                >
                                <div class="rightItemList">
                                    <!-- /** 告警级别：1、2、3 */ -->
                                    <span class="status" :class="getHeaderClass(item.isonline)"></span>
                                    <span class="qf" v-if="item.is_overdue == '1'">
                                        <img src="@/assets/images/monitor/qf.png" />
                                    </span>
                                    <span
                                        class="warn"
                                        v-if="item.is_alarm == '1'"
                                        :style="{
                                            marginRight: item.is_overdue ? '-10px' : 0
                                        }"
                                    >
                                        <img :src="getLevelImg(item.is_alarm)" />
                                    </span>
                                </div>
                            </div>
                            <div class="item-bottom" :class="getBottomClass(item.eq_type, item.is_alarm)">
                                <div class="countValue">
                                    <label>{{ item.eq_type == '01' ? '总用电量' : item.eq_type == '02' ? '总用水量' : '倍率' }}</label>
                                    <span
                                        >{{ item.eq_type == '03' ? item.rate : item.end_value }}
                                        {{ item.eq_type == '01' ? 'kWh' : item.eq_type == '02' ? 'm³' : '' }}</span
                                    >
                                </div>
                                <div class="todayValue">
                                    <label>{{
                                        item.eq_type == '01' ? '今日用电' : item.eq_type == '02' ? '今日用水' : '&nbsp;&nbsp;&nbsp;状态'
                                    }}</label>
                                    <span
                                        >{{ item.eq_type == '03' ? '' : item.diff_value
                                        }}{{
                                            item.eq_type == '03'
                                                ? item.is_online == '0'
                                                    ? '在线'
                                                    : '离线'
                                                : item.eq_type == '01'
                                                ? 'kWh'
                                                : 'm³'
                                        }}</span
                                    >
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="gjw-list-page" v-if="listData.length > 0">
                    <el-pagination
                        background
                        :layout="hasIsSizes ? 'prev, pager, next,total,sizes' : 'prev, pager, next,total'"
                        :total="count"
                        :page-size="size"
                        :current-page="current"
                        @current-change="pageChange"
                        :page-sizes="pageSizes"
                        @size-change="handleSizeChange"
                    >
                        >
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {listData} from '@/mockData/monitorCenter.js'
import {AjaxCommon} from '@/libs/apiCommon'
import {Utility} from '@/libs/utility.js'
export default {
    props: ['name', 'data', 'listTreeData', 'type', 'sbxq'],
    components: {},
    data() {
        return {
            hasIsSizes: true,
            count: 1,
            size: 20,
            current: 1,
            listData: [],
            sbxq: {},
            pageSizes: []
        }
    },
    // watch: {
    //     data: {
    //         handler(n) {
    //             if (n) {
    //                 this.listData = n
    //                 setTimeout(() => {
    //                     const count = this.sbxq.总数
    //                     this.count = parseInt(count ?? 0)
    //                 }, 100)
    //             }
    //         },
    //         deep: true,
    //         immediate: false
    //     }
    // },
    computed: {},
    mounted() {},
    created() {},
    methods: {
        /**
         * 设置页码和数据等
         * @param page 当前第几页
         * @param count 公共多少条数据
         * @param data 数据
         */
        setPageAndData(page, count, data, pageSizes) {
            this.pageSizes = pageSizes
            this.listData = data
            try {
                //分页后滚动到最上面
                document.getElementsByClassName('gjw-list-list')[0].scroll(0, 0)
            } catch (error) {}
            setTimeout(() => {
                this.current = page
                this.count = count ? parseInt(count) : 0
            }, 200)
        },
        handleSizeChange(e) {
            this.$emit('handleSizeChange', e)
        },
        pageChange(e) {
            this.$emit('pageChange', e)
        },
        getHeight() {
            return 'calc(100vh - 322px)'
        },
        /** 选中的左侧树节点后，点击在线设备等 */
        currentClick(type) {
            this.$emit('currentClick', type)
        },
        /** 查看详情 */
        gotoDetail(item) {
            this.$emit('gotoDetail', item)
        },
        getImg(type) {
            // 按国家导则 01 电表 02 水表 03气.... -->
            return type == '01'
                ? require('@/assets/images/monitor/db.png')
                : type == '02'
                ? require('@/assets/images/monitor/sb.png')
                : require('@/assets/images/data/wifiWhite.png')
        },
        // 获取是否在线
        getHeaderClass(level) {
            return level == '1' ? 'normal' : 'lx'
        },
        getBottomClass(type, level) {
            if (type == '01' && level) {
                return 'sbzc'
            } else if (type == '02' && level) {
                return 'dbzc'
            } else {
                return 'yc'
            }
        },
        // 获取告警设备
        getLevelImg(is_alarm) {
            return require('@/assets/images/monitor/warn2.png')
        }
    }
}
</script>

<style scoped lang="scss">
@media screen and (max-width: 1450px) {
    .selectValue {
        .value {
            font-size: 14px !important;
        }
        .rightValue {
            span {
                font-size: 14px !important;
            }
        }
    }

    .gjw-list .gjw-list-list .gjw-list-item .item {
        width: calc((100% - 40px) / 4) !important;
    }
}

@media screen and (min-width: 1450px) {
    .selectValue {
        .value {
            font-size: 15px !important;
        }
        .rightValue {
            span {
                font-size: 15px !important;
            }
        }
    }
    .gjw-list .gjw-list-list .gjw-list-item .item {
        width: calc((100% - 50px) / 5) !important;
    }
}

@media screen and (min-width: 1910px) {
    .selectValue {
        .value {
            font-size: 16px !important;
        }
        .rightValue {
            span {
                font-size: 16px !important;
            }
        }
    }
    .gjw-list .gjw-list-list .gjw-list-item .item {
        width: calc((100% - 60px) / 6) !important;
    }
}

.custom-tree-node {
    width: 100%;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    display: block !important;
}
.main {
    background-color: #fff;
    height: calc(100vh - 100px);
    margin: 10px 0;
    position: relative;
}
.main .content {
    padding: 10px;
    background-color: #fff;
    display: flex;
}
.leftArrow {
    width: 300px !important;
}
.rightArrow {
    width: 0 !important;
    overflow: hidden;
    padding: 0 !important;
    margin: 0 !important;
}
.leftTable {
    max-width: calc(100% - 320px);
}
.rightTable {
    max-width: calc(100% - 0px);
}
.treeContent {
    margin-right: 0;
    height: calc(100vh - 125px);
    transition: transform 0.3s;
    width: 300px;
    border-right: 1px solid #eee;
    padding-right: 10px;
}
.treeMain {
    height: calc(100vh - 175px);
    overflow: auto;
    margin-top: 10px;
}
.rightContent {
    background-color: #fff;
    height: calc(100vh - 100px);
    flex: 1;
    text-align: left;
}
.listCount {
    height: 90px;
    border: 1px solid #eeeef0;
    position: relative;
    background-color: #f5f9fc;
    border-radius: 4px;
}
.listCountLeft {
    width: 50%;
    float: left;
}
.listCountRight {
    width: 50%;
    float: left;
}
.listLine {
    width: 2px;
    height: 45px;
    background-color: #eeeef0;
    position: absolute;
    top: 22px;
    left: 51%;
}
.leftItem {
    width: 25%;
    float: left;
    text-align: center;
    padding-top: 20px;
}

.leftItem img {
    width: 50px;
}
.leftItem div {
    display: inline-block;
    margin-left: 15px;
    line-height: 30px;
    text-align: left;
}

.leftItem div label {
    font-size: 16px;
    display: block;
}

.leftItem div span {
    font-size: 14px;
    color: #757e8b;
}

.leftItem div span b {
    font-size: 20px;
    margin-right: 10px;
    color: #333;
}
.rightItem {
    width: 25%;
    float: left;
    text-align: center;
    padding-top: 22px;
}
.rightItem .itemTop {
    font-size: 14px;
    line-height: 27px;
}
.rightItem .itemTop label {
    font-size: 12px;
    width: 10px;
    display: inline-block;
    height: 10px;
    border-radius: 8px;
    margin-right: 10px;
}
.green {
    background-color: #01b77a;
}
.gray {
    background-color: #707070;
}
.red {
    background-color: #e60000;
}
.orange {
    background-color: #ff9900;
}
.rightItem .itemBottom {
    margin-top: 3px;
}
.rightItem .itemBottom span {
    font-size: 14px;
    color: #757e8b;
}
.rightItem .itemBottom span b {
    font-size: 20px;
    margin-right: 10px;
    color: #333;
}
.selectValue {
    display: flex;
    height: 50px;
    background: #f7f8fc;
    margin-top: 15px;
    border-radius: 4px;
    line-height: 50px;
}
.selectValue .value {
    margin-left: 20px;
    font-size: 16px;
}
.selectValue .rightValue {
    flex: 1;
    text-align: right;
    margin-right: 20px;
}
.selectValue .rightValue span {
    font-size: 16px;
    color: #666;
}
.selectValue .rightValue span b {
    font-size: 16px;
    color: #333;
}
.selectValue .rightValue span label {
    width: 10px;
    display: inline-block;
    height: 10px;
    border-radius: 10px;
    margin-left: 40px;
    margin-right: 5px;
}
.roomContent {
    height: calc(100vh - 230px);
    overflow-y: auto;
}
.gjw-list {
    /* height: calc(100vh - 168px); */
    background: #fff;
    margin-top: 10px;
    /* padding: 10px; */
}
.gjw-list .gjw-list-list {
    height: calc(100vh - 355px);
    overflow-y: auto;
    padding-top: 0px;
    &::-webkit-scrollbar {
        width: 8px; // 滚动条宽度
        display: none;
    }
}
.gjw-list .gjw-list-list .gjw-list-item {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding-left: 10px;
    padding-top: 3px;
}
.gjw-list .gjw-list-list .gjw-list-item .item {
    margin-right: 10px;
    width: calc((100% - 60px) / 6);
    height: 100px;
    border-radius: 4px;
    background: #fff;
    margin-bottom: 10px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 2px 7px;
    position: relative;
}
.gjw-list .gjw-list-list .gjw-list-item .item .item-header {
    font-size: 12px;
    height: 35px;
    line-height: 35px;
    background-color: #55cca4;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    color: #fff;
    overflow: hidden;
}
.gjw-list .gjw-list-list .gjw-list-item .item .db {
    background-color: #55cca4;
}
.gjw-list .gjw-list-list .gjw-list-item .item .sb {
    background-color: #6caae5;
}

.gjw-list .gjw-list-list .gjw-list-item .item .item-header img {
    float: left;
    margin: 10px 6px 0 10px;
    width: 16px;
    height: 16px;
}
.gjw-list .gjw-list-list .gjw-list-item .item .item-header label {
    font-size: 14px;
    float: left;
    max-width: 45%;
    overflow: hidden; /* 超出部分隐藏 */
    white-space: nowrap; /* 文本不换行 */
    text-overflow: ellipsis; /* 超出部分显示省略号 */
}

.gjw-list .gjw-list-list .gjw-list-item .item .item-header .rightItemList {
    float: right;
    height: 35px;
    text-align: right;
}
.gjw-list .gjw-list-list .gjw-list-item .item .item-header .rightItemList .warn {
    float: right;
    margin-right: -10px;
}
.gjw-list .gjw-list-list .gjw-list-item .item .item-header .rightItemList .level {
    font-size: 12px;
}

.gjw-list .gjw-list-list .gjw-list-item .item .item-header .rightItemList .qf {
    float: right;
    width: 10px;
    margin-right: 24px;
}

.gjw-list .gjw-list-list .gjw-list-item .item .item-header .rightItemList .status {
    width: 8px;
    height: 8px;
    display: block;
    border-radius: 8px;
    float: right;
    margin-right: 10px;
    margin-top: 14px;
}
.gjw-list .gjw-list-list .gjw-list-item .item .item-header .rightItemList .normal {
    background-color: #00ffa9;
}
.gjw-list .gjw-list-list .gjw-list-item .item .item-header .rightItemList .lx {
    background-color: #77dbb9;
}
.gjw-list .gjw-list-list .gjw-list-item .item .item-header .rightItemList .gj {
    background-color: #00ffa9;
}

.gjw-list .gjw-list-list .gjw-list-item .item .item-bottom {
    background-color: #e2f7f0;
    height: 65px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}
.gjw-list .gjw-list-list .gjw-list-item .item .dbzc {
    background-color: #e2f7f0 !important;
}
.gjw-list .gjw-list-list .gjw-list-item .item .sbzc {
    background-color: #e9f6fe !important;
}
.gjw-list .gjw-list-list .gjw-list-item .item .yc {
    background-color: #f4f4f4 !important;
}

.gjw-list .gjw-list-list .gjw-list-item .item .item-bottom .countValue {
    font-size: 14px;
    color: #666;
    padding-top: 13px;
    padding-bottom: 3px;
}
.gjw-list .gjw-list-list .gjw-list-item .item .item-bottom .countValue label {
    margin-left: 10px;
    margin-right: 10px;
}

.gjw-list .gjw-list-list .gjw-list-item .item .item-bottom .countValue span {
    font-size: 14px;
    color: #333;
}
.gjw-list .gjw-list-list .gjw-list-item .item .item-bottom .todayValue {
    font-size: 14px;
    color: #666;
}
.gjw-list .gjw-list-list .gjw-list-item .item .item-bottom .todayValue label {
    margin-left: 10px;
    margin-right: 10px;
}

.gjw-list .gjw-list-list .gjw-list-item .item .item-bottom .todayValue span {
    font-size: 14px;
    color: #333;
}
.gjw-list .gjw-list-page {
    text-align: right;
    position: absolute;
    bottom: 10px;
    right: -10px;
}
.cursor {
    // cursor: pointer;
}
.noData {
    display: flex;
    margin-top: 20%;
    justify-content: center;
    align-items: center;
    font-size: 16px;
}
</style>
